<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { axiosrmedical } from '@/http/axiosRead';
import { showToast } from 'vant';
import { useUserStore } from '@/stores/counter';

interface Patient {
  id: number;
  name: string;
  idCard: string;
  relation: string;
}

const router = useRouter();
const userStore = useUserStore();
const patients = ref<Patient[]>([]);
const loading = ref(false);

// 获取患者列表
const fetchPatients = async () => {
  loading.value = true;
  // 初始化时加载用户信息，以防刷新页面
  userStore.loadUserInfo();
  
  // 如果没有accountId，提示用户先登录
  if (!userStore.accountId) {
    showToast('请先登录');
    router.push('/login');
    loading.value = false;
    return;
  }

  try {
    console.log('获取患者列表，当前用户ID:', userStore.accountId);
    const res = await axiosrmedical.get('/Patient/GetPatients', {
      params: {
        PageIndex: 1,
        PageSize: 10,
        accountId: userStore.accountId // 使用登录用户的ID，注意大小写
      }
    });
    if (res.data && res.data.code === 200) {
      patients.value = res.data.pageData || [];
      console.log('获取到的患者列表:', patients.value);
    } else {
      showToast(res.data?.msg || '获取患者列表失败');
    }
  } catch (error) {
    console.error('获取患者列表出错:', error);
    showToast('网络错误，请稍后重试');
  } finally {
    loading.value = false;
  }
};

// 选择患者
const selectPatient = (patient: Patient) => {
  // 跳转到科室选择页面
  router.push({
    path: '/department-select',
    query: { 
      patientId: patient.id.toString(),
      patientName: patient.name 
    }
  });
};

// 返回上一页
const onBack = () => {
  router.back();
};

const addPatient = () => {
  // 添加就诊人时也传递登录用户ID
  router.push({
    path: '/patient-view',
    query: {
      accountId: userStore.accountId
    }
  });
};

onMounted(() => {
  fetchPatients();
});
</script>

<template>
  <div class="patient-page">
    <!-- 顶部导航栏 -->
    <van-nav-bar 
      title="选择就诊人" 
      left-arrow 
      @click-left="onBack">
      <template #right>
        <div class="nav-icons">
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="circle-btn"></span>
        </div>
      </template>
    </van-nav-bar>

    <div class="scrollable-content">
      <div class="page-title">请选择就诊人</div>

      <div class="patient-list">
        <van-loading v-if="loading" class="loading" size="24px" vertical>加载中...</van-loading>
        
        <div v-else-if="patients.length === 0" class="empty-tip">
          暂无就诊人，请先添加
        </div>
        
        <div v-else>
          <div 
            v-for="patient in patients" 
            :key="patient.id" 
            class="patient-item"
            @click="selectPatient(patient)">
            <div class="patient-info">
              <div class="patient-name">{{ patient.name }}</div>
              <div class="patient-relation">{{ patient.relation }}</div>
            </div>
            <div class="patient-id">{{ patient.idCard ? patient.idCard.replace(/(\d{6})(\d+)(\d{4})/, '$1********$3') : '暂无身份证信息' }}</div>
          </div>
        </div>
      </div>
      
      <!-- 添加就诊人按钮 -->
      <div class="add-patient">
        <van-button type="primary" block round @click="addPatient">添加就诊人</van-button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.patient-page {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #f8f9fa;
}

.scrollable-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px;
}

.nav-icons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dot {
  width: 6px;
  height: 6px;
  background: #d8d8d8;
  border-radius: 50%;
  display: inline-block;
}

.circle-btn {
  width: 18px;
  height: 18px;
  border: 1.5px solid #d8d8d8;
  border-radius: 50%;
  display: inline-block;
  margin-left: 6px;
}

.page-title {
  font-size: 16px;
  color: #333;
  margin: 20px 0;
}

.patient-list {
  margin-bottom: 20px;
}

.patient-item {
  background-color: #fff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.patient-info {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.patient-name {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.patient-relation {
  font-size: 12px;
  color: #4080ff;
  background-color: #e6f0ff;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 10px;
}

.patient-id {
  font-size: 14px;
  color: #999;
}

.loading {
  display: flex;
  justify-content: center;
  padding: 30px 0;
}

.empty-tip {
  text-align: center;
  color: #999;
  padding: 30px 0;
}

.add-patient {
  margin: 20px 0 40px;
}
</style> 